<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <title>22 榆林车务站 - png</title>
    <!--    <script src="../lib/ol4/ol4.js"></script>-->
    <script src='../lib/ol6.4.3/ol.js'></script>
    <script src='../lib/proj4/proj4.js'></script>
    <!--    <script src="https://cdn.jsdelivr.net/npm/mapbox-gl@2.0.0/dist/mapbox-gl.js"></script>-->
    <link rel='stylesheet' href='../css/ol4/ol.css'>
    <link rel='stylesheet' href='../css/main.css'>
</head>

<body>
<div id='map'></div>
</body>
<script>
	const projection = ol.proj.get('EPSG:3857');
	const tileSize = 256;
	const projectionExtent = projection.getExtent();
	console.log(projectionExtent);
	const origins = [
		[-180.0, 90.0],
		ol.extent.getTopLeft(projectionExtent),
	];
	const origin = origins[1];
	const size = ol.extent.getWidth(projectionExtent) / tileSize;
	const maxLevel = 24;
	const resolutions = [];
	const matrixIds = [];
	for (let z = 1; z <= maxLevel; z++) {
		resolutions[z - 1] = size / Math.pow(2, z - 1);
		matrixIds[z - 1] = (z - 1).toString();
	}

	const resolutions1 = [];
	const matrixIds1 = [];
	for (let z = 1; z <= 18; z++) {
		resolutions1[z - 1] = size / Math.pow(2, z - 1);
		matrixIds1[z - 1] = (z - 1).toString();
	}

	// const sR = resolutions.slice(0, 19);
	// console.log(resolutions, sR);
	console.log(resolutions);
	console.log(resolutions1);
	// console.log(origin);
	// console.log('15级分辨率:', resolutions[14]);
	// console.log('14级分辨率:', resolutions[13]);
	// console.log('19级分辨率:', resolutions[18]);
	// console.log('20级分辨率:', resolutions[19]);

	const tileGrid = new ol.tilegrid.WMTS({
		origin,
		resolutions,
		extent: projectionExtent,
		matrixIds,
	});

	const url = `http://t{0-6}.tianditu.gov.cn/img_w/wmts?tk=a6bf5a2496115f58481b947040c83ae3`;
	// const url = `http://`;

	const wmtsSource = new ol.source.WMTS({
		url,
		layer: 'img',
		matrixSet: 'w',
		format: 'tiles',
		projection: projection,
		tileGrid: tileGrid,
		style: 'default',
		wrapX: false,
	});


	let xyzUrl = 'http://192.168.109.48:10001/scgis/mbt?name=YL_DOM';  // 榆林
	// xyzUrl = 'http://192.168.108.48:9998/scgis/mbt?name=YL_DOM01';  // 榆林
	// xyzUrl = 'https://qz.scooper.com.cn/scgis/mbt?name=BJTK_DOM';  // 冠县
	xyzUrl = 'http://192.168.108.48:9998/scgis/proxy?module=guanxian';  // 冠县
	xyzUrl = 'https://qz.scooper.com.cn/scgis/proxy?module=guanxian';  // 冠县
	// xyzUrl = 'http://121.36.242.84:10001/scgis/proxy?module=guanxian';  // 冠县
	// xyzUrl = 'http://192.168.108.48:9998/scgis/proxy?module=default';  // 冠县
	const xyzSource = new ol.source.XYZ({
		// url: 'http://192.168.109.48:10001/scgis/mbt?name=XJZ_DOM'
		tileUrlFunction: (tileCord) => {
			console.log(tileCord);
			// Server expects 1-based level and XYZ row (top-left origin)
			const z = tileCord[0];
			const x = tileCord[1].toString(16).padStart(8, '0');
			const y = (tileCord[2]).toString(16).padStart(8, '0');
			return `${xyzUrl}&level=L${z}&row=R${y}&col=C${x}`;
		},
		tileGrid: new window.ol.tilegrid.TileGrid({
			origin: ol.extent.getTopLeft(projectionExtent),
			resolutions,
			extent: [12849206.145123, 4369173.8062519, 12852743.363544, 4369876.6761480],
			tileSize: 256,
		}),
	});

	// 图层
	const baseLayer = new ol.layer.Tile({
		source: wmtsSource,
	});


	// 控制图层在15-19层级显示：
	// maxResolution: resolutions[14] - 当视图分辨率大于15级分辨率时显示（即15级及以上）
	// minResolution: resolutions[18] - 当视图分辨率小于19级分辨率时显示（即19级及以下）
	// 这样组合后，图层只在15-19层级显示

	console.log('resolutions[14]:', resolutions[14]);

	const xyzLayer = new ol.layer.Tile({
		source: xyzSource,
		maxResolution: resolutions[14], // 15级分辨率，索引为14，当视图分辨率大于此值时显示
		// minResolution: resolutions[18], // 19级分辨率，索引为18，当视图分辨率小于此值时显示
	});

	let centerPoint = ol.proj.transform([115.43717340271571, 36.68537611855794], 'EPSG:4326', 'EPSG:3857');
	centerPoint = ol.proj.transform([115.43898735268469, 36.49952984522561], 'EPSG:4326', 'EPSG:3857');
	// const originPoint = ol.proj.toLonLat([-2.0037508342787E7, -2.0037508342787E7], 'EPSG:4326', 'EPSG:3857');
	// const originPoint = ol.proj.toLonLat([12850974.7543335, 4369525.24119995], 'EPSG:3857', 'EPSG:4326');
	// console.log('originPoint', originPoint);

	const points = [
		[12850974.7543335, 4369525.24119995],
	];
	// centerPoint = points[0];

	const map = new ol.Map({
		layers: [
			baseLayer,
			// poiLayer,
			xyzLayer,
		],
		target: 'map',
		view: new ol.View({
			center: centerPoint,
			projection,
			zoom: 16,
			maxZoom: 24,
			minZoom: 8,
			resolutions,
		}),
	});

	setTimeout(() => {
		console.log('延时-更新天地图的tileGrid');
		const source = baseLayer.getSource();
		const oldTileGrid = source.getTileGrid();
		// 创建新的 tileGrid
		// 更新 tileGrid
		source.tileGrid = new ol.tilegrid.WMTS({
			extent: oldTileGrid.getExtent(),
			origin: oldTileGrid.getOrigin(),
			resolutions: resolutions1,
			matrixIds: matrixIds1,
		});
		source.refresh();
	}, 3000);

	// setTimeout(()=>{
	// 	const view = map.getView();
	// 	console.log('0825=== resolutions', resolutions);
	// 	console.log('0825=== view', view,view.getResolution());
	// 	console.log('当前缩放级别:', view.getZoom());
	// 	console.log('当前分辨率:', view.getResolution());
	// 	console.log('图层显示范围: 15-19级');
	// 	console.log('15级分辨率:', resolutions[14]);
	// 	console.log('19级分辨率:', resolutions[18]);
	// 	console.log('设置的maxResolution:', resolutions[14]);
	// 	console.log('设置的minResolution:', resolutions[18]);
	// 	console.log('当前分辨率是否在范围内:', view.getResolution() <= resolutions[14] && view.getResolution() >= resolutions[18]);
	// },3000)
</script>

</html>